<script setup lang="ts">
import { useList } from '~comp-b/global-popups/invitation/hooks/index';

const router = useRouter();
const { invitedSpinShow } = useFirstRechargeTips();
const authed = useAuthed();
const { withdrawAmount, currency } = useList();

const show = computed(() => (invitedSpinShow.value && authed.value));
function onClick() {
  invitedSpinShow.value = false;
  router.push({ name: RN.INVITATION });
}
</script>

<template>
  <div v-if="show" class="titp 0, 0, 0.50)] shadow-[0_0_8_0_rgba(0, flex cursor-pointer items-center justify-center gap-2 border border-sys-text-marker rounded-[9999px] border-solid px-5 py-1.5 word-spacing-normal" @click="onClick">
    <I18nT keypath="n6rx6VeRagsNvyCwv0qiY" tag="p" class="flex items-center justify-center gap-1 whitespace-nowrap text-sm text-white font-bold">
      <template #reward>
        <TAmount
          :value="withdrawAmount"
          :decimals="0"
          :symbol="currency"
          format="fixed-dec"
          colored="inherit"
          iconPos="left"
        />
      </template>
    </I18nT>
  </div>
</template>

<style scoped lang="scss">
.titp {
  background: radial-gradient(84.02% 123.6% at 16.73% -9.06%, rgba(234, 179, 8, 0.2) 0%, rgba(19, 20, 22, 0.2) 68.89%),
    #26272e;
  &:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 15%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #cc9c07;

    @media bp-lt-tabletl {
      left: 8%;
    }
  }
}
</style>
